<template>
	<div>
		<div class="sell">
			<div class="sell-left">
				<Icon type="ios-arrow-back" size="24" v-on:click="tiaozhuan" />
			</div>
			<div class="sell-right">
				<Icon type="ios-chatbubbles-outline" size="24" />
			</div>
		</div>
		<div class="sell-1">
			<div class="sell-shang">{{shang}}</div>
			<div class="sell-xia">{{xia}}</div>
		</div>
		<div class="sell-2">
			<router-link to='/addres/addres'><span>{{tianjia}}</span></router-link>
		</div>
		<div class="sell-tiao"></div>
		<div class="sell-3">
			<img src="../../../static/shoyeimg/img/pingu.jpg" />
		</div>
		<div class="sell-tiao"></div>
		<div class="lianjie">{{lianjia}}</div>
		<div class="paomadeng">
			<Carousel v-model="value1" loop>
				<CarouselItem>
					<div class="demo-carousel"><img src="../../../static/shoyeimg/img/madeng2.jpg" /></div>
				</CarouselItem>
				<CarouselItem>
					<div class="demo-carousel"><img src="../../../static/shoyeimg/img/madeng1.jpg" /></div>
				</CarouselItem>
				<CarouselItem>
					<div class="demo-carousel"><img src="../../../static/shoyeimg/img/madeng2.jpg" /></div>
				</CarouselItem>
				<CarouselItem>
					<div class="demo-carousel"><img src="../../../static/shoyeimg/img/madeng2.jpg" /></div>
				</CarouselItem>
			</Carousel>
		</div>
		<div>
			<div class="sell-4" v-for="(item,index) in model5">
				<div class="sell-4-left">
					<div class="sell-4-shang">{{item.tit1}}</div>
					<div class="sell-4-xia">{{item.tit2}}</div>
				</div>
				<div class="sell-4-right">
					<img :src="item.tubiao" />
				</div>
			</div>
		</div>
		<div class="dibu">
			<span>
				<router-link to="/zizhu">
					<Icon type="ios-color-wand-outline" size="24" />{{zizhu}}</router-link>
			</span>
			<span>
				<router-link to="/kefu">
					<Icon type="ios-chatbubbles-outline" size="24" />{{kefu}}</router-link>
			</span>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'sellinghouse',
		data() {
			return {
				value1: 0,
				shang: "添加小区预先了解行情",
				xia: "提供小区定价参考和供需分析",
				tianjia: "立即添加",
				lianjia: "链家服务",
				zizhu: "自助买房",
				kefu: "咨询客服",
				model5: [{
						tit1: "强大线下，保证买房效率",
						tit2: "全国们带你800+,超过十万+专业经纪人",
						tubiao: "./static/shoyeimg/img/qiang1.jpg"
					},
					{
						tit1: "线上科技，提升买房效率",
						tit2: "全国们带你800+,超过十万+专业经纪人",
						tubiao: "./static/shoyeimg/img/xianxia1.jpg"
					},
					{
						tit1: "强大线下，保证买房效率",
						tit2: "全国们带你800+,超过十万+专业经纪人",
						tubiao: "./static/shoyeimg/img/qiang1.jpg"
					},
					{
						tit1: "强大线下，保证买房效率",
						tit2: "全国们带你800+,超过十万+专业经纪人",
						tubiao: "./static/shoyeimg/img/xianxia1.jpg"
					},
					{
						tit1: "强大线下，保证买房效率",
						tit2: "全国们带你800+,超过十万+专业经纪人",
						tubiao: "./static/shoyeimg/img/qiang1.jpg"
					},

				],
			}

		},
		methods: {
			tiaozhuan() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>
	.sell {
		width: 7.5rem;
		height: 0.9rem;
		display: flex;
		position: fixed;
		z-index: 999;
		background: white;
	}

	.sell-left {
		width: 6.2rem;
		height: 0.9rem;
		line-height: 0.9rem;
		margin-left: 0.2rem;
	}

	.sell-left>a {
		color: gray;
	}

	.sell-right {
		width: 1rem;
		height: 0.9rem;
		line-height: 0.9rem;
		color: gray;
	}

	.sell-1 {
		width: 7.5rem;
		height: 2.46rem;
		padding: 1rem 0rem;
	}

	.sell-shang {
		height: 0.9rem;
		width: 7.5rem;
		line-height: 0.9rem;
		text-align: center;
		font-size: 20px;
		color: black;
	}

	.sell-xia {
		height: 0.5rem;
		width: 7.5rem;
		line-height: 0.5rem;
		text-align: center;
		font-size: 14px;
		color: gray;
	}

	.sell-2 {
		width: 7.5rem;
		height: 1.61rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sell-2>a>span {
		display: block;
		width: 2.77rem;
		height: 0.87rem;
		background: #394043;
		color: white;
		text-align: center;
		line-height: 0.87rem;
		border-radius: 0.1rem;
		font-size: 14px;
	}

	.sell-tiao {
		width: 7.5rem;
		height: 0.1rem;
		background: gainsboro;
	}

	.sell-3 {
		width: 7.5rem;
		height: 2.08rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sell-3>img {
		width: 1.48rem;
		height: 1.36rem;
	}

	.lianjie {
		width: 7.5rem;
		height: 0.99rem;
		line-height: 0.99rem;
		color: black;
		font-size: 18px;
		padding: 0rem 0.4rem;
		box-sizing: border-box;
	}

	.demo-carousel>img {
		width: 7.2rem;
		height: 2.71rem;
		margin-left: 0.15rem;
	}

	.sell-4 {
		width: 7.5rem;
		height: 1.26rem;
		display: flex;
		margin-top: 0.3rem;
	}

	.sell-4-left {
		width: 5.91rem;
		height: 1.26rem;
	}

	.sell-4-right {
		width: 1.37rem;
		height: 1.26rem;
		padding: 0.06rem 0.15rem;
	}

	.sell-4-shang {
		padding: 0rem 0.2rem;
		box-sizing: border-box;
		width: 5.91rem;
		height: 0.6rem;
		line-height: 0.6rem;
		font-size: 14px;
		color: black;
	}

	.sell-4-xia {
		padding: 0rem 0.2rem;
		box-sizing: border-box;
		width: 5.91rem;
		height: 0.6rem;
		line-height: 0.6rem;
		font-size: 12px;
		color: gray;
	}

	.sell-4-right>img {
		width: 1.20rem;
		height: 1.18rem;
	}

	.dibu {
		width: 7.5rem;
		height: 1.4rem;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: white;
		display: flex;
		justify-content: space-around;
	}

	.dibu>span {
		margin-top: 0.2rem;
		display: block;
		width: 3.27rem;
		height: 0.99rem;
		line-height: 0.99rem;
		text-align: center;
	}

	.dibu>span>a {
		color: #00ae66;
		font-size: 16px;
	}
</style>
